﻿<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <script type="text/javascript" src="js/option.js"></script>
    <link rel="stylesheet" type="text/css" href="css/option.css">
    <title>{app.settings}</title>
    <script type="text/javascript">
    var refreshEvent = "reloadTab";

      function load() {

        var option = new TabOption();

        var radio = document.querySelectorAll(".backgroundImgType"), count,
          backgroundType = option.getBackgroundType();

        for(count = 0; count < radio.length; count++) {
          if(radio[count].value == backgroundType) {
            radio[count].checked = true;
            backgroundTypeChange(radio[count]);

            if(backgroundType == 'url') {
              var backgroundImgUrl = document.getElementById("background-img-url");
              backgroundImgUrl.value = option.getBackgroundUrl();
            }
            break;
          }
        }

        var fontColorInput = document.getElementById("font-color");
        fontColorInput.value = option.getFontColor();

        var borderColorInput = document.getElementById("border-color");
        borderColorInput.value = option.getBorderColor();

        var closeColorInput = document.getElementById("close-color");
        closeColorInput.value = option.getCloseButtonColor();



        var rowBackground = document.getElementById("row-background");
        rowBackground.value = option.getRowBackgroundColor();
      }


      function save() {

        var rt = window.external.mxGetRuntime();
        var option = new TabOption();

        var radio = document.querySelectorAll(".backgroundImgType"), count, backgroundImg;
        for(count = 0; count < radio.length; count++) {
          if(radio[count].checked == true) {
            option.saveBackgroundType(radio[count].value);

            if(radio[count].value == 'url') {
              var backgroundImgUrl = document.getElementById("background-img-url");
              backgroundImg = backgroundImgUrl.value;
              option.saveBackgroundUrl(backgroundImg);
            } else {
              var backgroundFile = document.getElementById("background-img-file");
              if(backgroundFile.files && backgroundFile.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                  backgroundImg = e.target.result;
                  option.saveBackgroundUrl(backgroundImg);
                  rt.post(refreshEvent);
                  location.reload();
                };
                reader.readAsDataURL(backgroundFile.files[0]);
              }

            }
          }
        }

        var fontColorInput = document.getElementById("font-color");
        option.saveFontColor(fontColorInput.value);

        var borderColorInput = document.getElementById("border-color");
        option.saveBorderColor(borderColorInput.value);

        var closeColorInput = document.getElementById("close-color");
        option.saveCloseButtonColor(closeColorInput.value);


        var rowBackground = document.getElementById("row-background");
        option.saveRowBackgroundColor(rowBackground.value);

        rt.post(refreshEvent);

      }

      function fixUrl() {
        var backgroundImgUrl = document.getElementById("background-img-url");
        var reg = /^http(s)?\:\/\//;
        var reg2 = /\w+\.{1}\w+/;
        if(backgroundImgUrl.value.match(reg2) !== null && backgroundImgUrl.value.match(reg) === null)
        {
          backgroundImgUrl.value = "http://" + backgroundImgUrl.value;
        }
        save();
      }

      function backgroundTypeChange (radio) {
        var urlInput = document.querySelectorAll("#background-img-url")[0],
            fileInput = document.querySelectorAll("#background-img-file")[0];
          if(radio.value === "url") {
              urlInput.style.display = "inline";
              fileInput.style.display = "none";
          } else if (radio.value === "file") {
              fileInput.style.display = "inline";
              urlInput.style.display = "none";
          }
        }

      function selectFile (file) {
        
      }
    </script>
  </head>
  <body onload="load()">
    <div class="wrap">
      <h1>{app.tabManager}</h1>
      <form onsubmit="save()">
      <fieldset class="appearance">
        <legend>{app.appearance}</legend>
        <!-- 背景图url -->
        <label for="background-img-url">{app.background}</label>
        <input type="radio" class="backgroundImgType" name="background" value="url" onchange="backgroundTypeChange(this)"/>{app.url}
        <input type="radio" class="backgroundImgType" name="background" value="file" onchange="backgroundTypeChange(this)"/>{app.file}<br/>
        <input type="url" style="display: none;" placeholder="{app.plaseEnterUrl}" id="background-img-url" type="text" />
        <input type="file" style="display: none;" id="background-img-file" accept="image/*"/>
        <br />
        <!-- 文字颜色 -->
        <label for="font-color">{app.fontColor}</label>
        <input id="font-color" type="color" />

        <label for="row-background">{app.rowBackground}</label>
        <input id="row-background" type="color" />

        <label for="border-color">{app.borderColor}</label>
        <input id="border-color" type="color" />

        <label for="close-color">{app.closeButtonColor}</label>
        <input id="close-color" type="color" />

        <div class="button-wrap">
          <button type="button" onclick="fixUrl()">{app.save}</button>
        </div>
        
      </fieldset>
      </form>
    </div>
  </body>
</html>